<template>
  <div class="main wh-full">
    <el-container class="main-container">
      <el-main>
        <div class="container2 cc_main">
          <!-- 标题栏 -->
          <div class="top_title flex flex-between">
            <div class="top_title flex">
              <h3 class="font-24 font-bold">法币交易订单记录</h3>
              <p class="font-12 pright">支持法币与数字资产大额交易</p>
            </div>
          </div>
          <!-- 内容部分 -->
          <div class="alltrad_box m-top-10">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="进行中" name="0">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='autoid' label='订单ID' width='80'></el-table-column>
                    <el-table-column prop='wdate' :label='$t("time")||"时间"'  width='190'></el-table-column>
                    <el-table-column prop='coin' :label='$t("currencyType")||"币种"'></el-table-column>
                    <el-table-column width='120' label='类型' >
                      <template slot-scope="scope" >
                       <span 
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='price' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='zj' :label='($t("totalPrice")||"总价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='hz' label='户主'></el-table-column>
                    <el-table-column width='200' :label='$t("status")||"状态"' >
                      <template slot-scope="scope" >
                        <span v-if="scope.row.state=='waitpay'" class="m-right-10">待付款</span>
                        <span v-if="scope.row.state=='witrealy'" class="m-right-10">待收款</span>
                        <span v-if="scope.row.state=='success'" class="m-right-10">已完成</span>
                        <span v-if="scope.row.state=='unusual'" class="m-right-10">异常</span>
                        <span v-if="scope.row.state=='cancel'" class="m-right-10">已取消</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width='200'>
                      <template slot-scope="scope">
                        <el-button  size="mini"  type="danger"  @click="goTrade('/FabiNew/FBorder_info',scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" @click="questc2corder(scope.$index, scope.row)">申诉</el-button> 
                        <el-button type="text" size="mini"    @click="close_orderBtn(scope.$index, scope.row)">取消</el-button>
                      </template>
                    </el-table-column> 
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="已完成" name="1">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='wdate' :label='$t("time")||"时间"'></el-table-column>
                    <el-table-column prop='coin' :label='$t("currencyType")||"币种"'></el-table-column>
                    <el-table-column :label='$t("type")||"交易类型"'>
                      <span slot-scope="scope"
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                    </el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='price' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='zj' :label='($t("totalPrice")||"总价")+"（CNY）"'>
                      <template slot-scope="scope">
                        <span>{{(scope.row.number*scope.row.price).toFixed(2)}}</span>
                      </template> 
                    </el-table-column>
                    <el-table-column width='150' :label='$t("status")||"状态"'>
                      <template slot-scope="scope">
                        <span v-if="scope.row.state=='waitpay'" class="m-right-10">待付款</span>
                        <span v-if="scope.row.state=='witrealy'" class="m-right-10">待收款</span>
                        <span v-if="scope.row.state=='success'" class="m-right-10">已完成</span>
                        <span v-if="scope.row.state=='unusual'" class="m-right-10">异常</span>
                        <span v-if="scope.row.state=='cancel'" class="m-right-10">已取消</span>
                        <span v-if="scope.row.state=='section'" class="m-right-10">全部成交</span>
                        <span v-if="scope.row.state=='unfilled'" class="m-right-10">未成交</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="已取消" name="2">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='wdate' :label='$t("time")||"时间"'></el-table-column>
                    <el-table-column prop='coin' :label='$t("currencyType")||"币种"'></el-table-column>
                    <el-table-column :label='$t("type")||"交易类型"'>
                      <span slot-scope="scope"
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                    </el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='price' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='zj' :label='($t("totalPrice")||"总价")+"（CNY）"'>
                      
                    </el-table-column>
                    <el-table-column width='150' :label='$t("status")||"状态"'>
                      <template slot-scope="scope">
                        <span v-if="scope.row.state=='waitpay'" class="m-right-10">待付款</span>
                        <span v-if="scope.row.state=='witrealy'" class="m-right-10">待收款</span>
                        <span v-if="scope.row.state=='success'" class="m-right-10">已完成</span>
                        <span v-if="scope.row.state=='unusual'" class="m-right-10">异常</span>
                        <span v-if="scope.row.state=='cancel'" class="m-right-10">已取消</span>
                        <span v-if="scope.row.state=='section'" class="m-right-10">全部成交</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="异常订单" name="3">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='wdate' :label='$t("time")||"时间"'></el-table-column>
                    <el-table-column prop='coin' :label='$t("currencyType")||"币种"'></el-table-column>
                    <el-table-column :label='$t("type")||"交易类型"'>
                      <span slot-scope="scope"
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                    </el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='price' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='zj' :label='($t("totalPrice")||"总价")+"（CNY）"'>
                      
                    </el-table-column>
                    <el-table-column width='150' :label='$t("status")||"状态"'>
                      <template slot-scope="scope">
                        <span v-if="scope.row.state=='waitpay'" class="m-right-10">待付款</span>
                        <span v-if="scope.row.state=='witrealy'" class="m-right-10">待收款</span>
                        <span v-if="scope.row.state=='success'" class="m-right-10">已完成</span>
                        <span v-if="scope.row.state=='unusual'" class="m-right-10">异常</span>
                        <span v-if="scope.row.state=='cancel'" class="m-right-10">已取消</span>
                        <span v-if="scope.row.state=='section'" class="m-right-10">全部成交</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--  -->
        </div>
      </el-main>
    </el-container>
    <!-- 弹出搜索框 -->
 
    <!-- 待付款 -->
    <el-dialog
      title="申诉订单"
      :visible.sync="questc2corderProp"
      width="40%"
      center>
      <div class="info_box">
        <div class="flex m15">
          <p class="w120">订单ID</p><p>{{SeerowData.autoid}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">单价</p><p>{{SeerowData.price}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">币种</p><p>{{SeerowData.coin}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">数量</p><p>{{SeerowData.number}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">申诉理由</p>
          <div class="w400">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="parinfo" maxlength="200">
            </el-input>
          </div>
        </div>
        <div class="flex">
          <p class="w120">上传凭证</p>
          <div
              slot='uploadfile'
              class="upload-file p-rel"
            >
              <input
                @change="onChange"
                type="file"
              >
              <button class="btn-success btn-small">上传凭证</button>
              <a
                v-if="imgUrl"
                :href="imgUrl"
                target="_blank"
                class="photo-preivew img_w300"
              >
                <img :src="imgUrl">
              </a>
            </div>
        </div>
        <div class=" ">
          <p class="color-danger m-top-10">*订单已经生成，请立即完成付款</p>
          <p class="color-danger m-top-10">*下单买入后<b>冒充已付款</b>，买方可以申诉举报，一经查实将封禁处理</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="questc2corderProp = false">取 消</el-button>
        <el-button type="primary"  @click="complaintBtn()"> 确定投诉 </el-button>
      </span>
    </el-dialog>
    <!-- 订单详情弹窗 -->
    <el-dialog
      title="订单详情"
      :visible.sync="seeInfoProp"
      width="30%"
      center>
      <div class="info_box">
        <div class="flex m15">
          <p class="w120">订单ID</p><p>{{SeerowData.autoid}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">订单时间</p><p>{{SeerowData.writedate}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">订单类型</p><p v-text="SeerowData.type==0?'买入':'卖出'"></p>
        </div>
        <div class="flex m15">
          <p class="w120">单价</p><p>{{SeerowData.price}} （CNY）</p>
        </div>
        <div class="flex m15">
          <p class="w120">数量</p><p>{{SeerowData.number}} {{SeerowData.coin}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">总价</p><p>{{SeerowData.zj}} （CNY）</p>
        </div>
        <div class="deshd_bor">
          <h3>对方信息</h3>
            <div class="flex m15">
              <p class="w120">邮箱</p><p>  <span >{{SeerowData.email||'暂无'}}</span> </p>
            </div>
            <div class="flex m15">
              <p class="w120">手机号</p><p>  <span >{{SeerowData.tel||'暂无'}}</span> </p>
            </div>
        </div>
        <!-- border -->
        <div class="peo_info"></div> 
        <div class="flex m15">
          <p class="w120">户主</p><p>{{SeerowData.hz}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">银行名称</p><p> <span class="m-right-10">{{SeerowData.khyh}} </span> <span class="m-right-10">{{SeerowData.khzh}}</span>  </p>
        </div>
        <div class="flex m15">
          <p class="w120">银行卡号</p><p>  <span >{{SeerowData.bankcard}}</span> </p>
        </div>
        <div class="flex m15">
          <p class="w120">支付宝</p><p>{{SeerowData.zfb||'暂无'}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">支付宝收款码</p><div class="img_w300"> <img :src="SeerowData.zfbimg" alt="" srcset=""></div>
        </div>
        <div class="flex m15" >
          <p class="w120">微信</p><p>{{SeerowData.wx||'暂无'}}</p>
        </div>
        <div class="flex m15">
          <p class="w120">微信收款码</p><div class="img_w300"> <img :src="SeerowData.wximg" alt="" srcset=""></div> 
        </div>
        <div v-if="SeerowData.state==3||SeerowData.state==5">
        <div class="flex m15" >
          <p class="w120">申诉理由</p><p>{{SeerowData.info}}</p>
        </div>
        <div class="flex m15" >
          <p class="w120">申诉截图</p><div class="img_w300"> <img :src="SeerowData.photo" alt="" srcset=""></div>
        </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="seeInfoProp = false">取 消</el-button>
        <el-button type="primary"  v-if="SeerowData.type==0&&SeerowData.state==0" @click="sendmoneyok()"> 我已付款 </el-button>
        <el-button type="primary"  v-if="SeerowData.type==1&&SeerowData.state==1" @click="getmoneyok()"> 点击收款 </el-button>
        <el-button type="primary"  v-if="SeerowData.type==0&&SeerowData.state==1" > 待对方收款 </el-button>
        <el-button type="primary"  v-if="SeerowData.type==1&&SeerowData.state==0" > 待对方付款 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
import axios from "axios";
export default {
  data() {
    return {
      userData: this.userModel,
      showDialog: false,
      currencyList: [],
      coinInfo: "",
      buyForm: {
        number: "",
        total: ""
      },
      sellForm: {
        number: "",
        total: ""
      },
      showLoading: false,
      canTrade: false,
      bindState: null,
      myOrderList: [],
      allOrderList: [],
      bankInfo: "",
      orderStatus: 0,
      myBalance: 0,

      //随机生成的备注字符串
      noteStr: "",
      tableDataTwo:[],
      
      tableData: [],
      value5: ['测试',],
      options:[],
      questc2corderProp:false,
      seeInfoProp:false, 
      SeerowData:{} ,
      activeName: '0',
      state:'sending',
      dialogId: null,
      parautoid:'',
      imgUrl:'',
      parinfo:'',
      pageData:{
          // 分页 pagenumber 总页数  pagesize每页条数   pagecode页码 
          coin: '',
          state:'witrealy',
          page:1,
          limit:30,
        },
    };
  },
  computed: {
    buyingLabel() {
      return `${this.$t("buy") || "买入"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    sellingLabel() {
      return `${this.$t("sell") || "卖出"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    buyState() {
      return `${this.$t("buy") || "买入"}`;
    },
    minNum() {
      return `${this.$t("minNum") || "最少"} ${this.coinInfo.minnum * 1}`;
    },
    sellState() {
      return `${this.$t("sell") || "卖出"}`;
    },
    buyTotal() {
      return this.buyForm.number * this.coinInfo.buycny;
    },
    sellTotal() {
      return this.sellForm.number * this.coinInfo.sellcny;
    }
  },
  mounted() {
    if (!this.userData.isLogin) {
        // this.errMsg("label120" || "请登录后操作");
        return false;
    }else{
        this.fiat_order();//进行中的
        // this.state='sending';//已经匹配的 进行中
        // this.getmyc2ctradorder();
    }    
    
  },
  methods: {
    handleClick(tab, event) {
      // getmyc2ctradorder    已经匹配0 已完成  2   已取消3   已申诉 5      未匹配 查看我的挂单（未交易）
      //选项卡数据切换
        console.log(tab, event);
        console.log(event.target.getAttribute('id'))  //获取到当前元素的id
        const id=event.target.getAttribute('id');
        // this.state=event.target.getAttribute('id');
      if(id=='tab-0'){
        this.tableData=[];
        this.pageData.state='witrealy';//已经匹配的 进行中
        // this.getmyc2ctradorder();
        this.fiat_order();//进行中的
      } else if(id=='tab-1'){
        this.tableData=[];
        this.pageData.state='success';//0:已完成
        this.c2c_order();
      }else if(id=='tab-2'){
        this.tableData=[];
        this.pageData.state='cancel';
        this.c2c_order();//已取消：cancel
      }else if(id=='tab-3'){
        this.tableData=[];
        this.pageData.state='unusual';
        this.c2c_order();//异常订单：cancel
      }
    },
    handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
    // 生成随机备注信息
    getNote() {
      let str = "";
      for (let i = 0; i < 6; i++) {
        str += this.Util.randomNum(0, 9);
      }
      this.noteStr = str;
    },

    // 查看已完成或者已取消的法币订单
    c2c_order(){
      this.request(this.api.fiat_order,this.pageData).then(res => {
        // console.log(`OTC订单${JSON.stringify(res)}`);
        this.showLoading = true;
        if (res.code == "0" && res.data ) {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
          // this.myOrderList = this.getMyOrderlist(
          //   list,
          //   this.coinInfo.coinid || list[0].coinid
          // );
        }
      });
    },
    getMyOrderlist(listArr, coinid) {
      let arr = [];
      if (listArr && this.Util.dataType(listArr) == "array") {
        listArr.map(item => {
          if (item.coinid == coinid) {
            arr.push(item);
          }
        });
        return arr;
      }
    },
    onListClick(data) {
      this.coinInfo = data;
      this.myOrderList = this.getMyOrderlist(this.allOrderList, data.coinid);
      this.getAvailable(data.coinid);
      this.buyForm = {
        number: "",
        total: ""
      };
      this.sellForm = {
        number: "",
        total: ""
      };
    },
    dialogClose() {
      this.showDialog = false;
    },
    // 待付款按钮点击
    SeepayInfo(index, row) {
        console.log(index, row);
        this.seebuyProp=true;
        this.SeerowData=row;
        console.log(row.orderid);    
    },
    // 撤销订单
    updatec2ctrad(index,row){
        console.log(index, row);
        this.seebuyProp=true;
        this.SeerowData=row;
        console.log(row.orderid);   
    },
    SeeRowinfo(index,row){
        console.log(index, row);
        this.seeInfoProp=true;
        this.SeerowData=row;
        console.log(row.orderid);   
    },
    //上传图片
    //上传凭证
    onChange(e) {
      e.preventDefault();
      let file = e.target.files[0];
      let { name, size, type } = file;
      let formData = new FormData();
      let options = {
        headers: {
          "Content-Type": "MultipartFile/form-data"
        },
        method: "post"
      };
      if (!/\.(jpg|png)$/.test(name)) {
        this.$message.error("图片格式需为jpg或者png");
        return;
      }
      if (size > 4 * Math.pow(1024)) {
        this.$message.error(
          `图片大小不可超过4M,当前图片大小${size / Math.pow(1024, 2)}M`
        );
        return;
      }
      formData.append("imgurl", file);
      options.url = `${this.api.baseURL}/user/img`;
      options.data = formData;
      axios(options).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "上传成功");
          this.imgUrl = res.data[0].url;
        }
      });
    },
    // 撤单
    clearOrderBtn(index, row) {
        console.log(index, row);
        const autoid =row.autoid;
        this.$confirm('此操作将撤销该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.updatec2ctrad,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//0:未匹配
                this.getmyc2cmarketorder();
              }else{
                this.$message.error(res.msg);
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    close_orderBtn(index, row) {
        console.log(index, row);
        const autoid =row.autoid;
        this.$confirm('此操作将取消该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.close_order,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//0:未匹配
                this.getmyc2cmarketorder();
              }else{
                this.$message.error(res.msg);
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // 打款
    sendmoneyok(){
      const autoid =this.SeerowData.autoid;
        this.$confirm('给上述账号转账后点击【确定】按钮, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.sendmoneyok,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                this.seeInfoProp=false;
              }else{
                this.$message.error(res.msg);
                this.seeInfoProp=false;
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // 收款
    getmoneyok(){
      const autoid =this.SeerowData.autoid;
        this.$confirm('点击收款后该笔订单完成, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.getmoneyok,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                this.seeInfoProp=false;
              }else{
                this.$message.error(res.msg);
                this.seeInfoProp=false;
              }
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // questc2corder 投诉、申诉订单
    questc2corder(index, row){
      const autoid =row.autoid;
        this.$confirm('确定投诉该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.questc2corderProp=true;
          this.SeerowData = row;
          this.parautoid=autoid;
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });  
    },
    complaintBtn(){
      let parmData={
        autoid:this.parautoid,
        photo:this.imgUrl,
        info:this.parinfo,
      }
      if(parmData.info==''){
        this.$message.error('请填写申诉原因');
        return
      }
      if(parmData.photo==''){
        this.$message.error('请上传图片凭证');
        return
      }
      return this.request(this.api.questc2corder,parmData).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.questc2corderProp=false;
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                
              }else{
                this.$message.error(res.msg);
                this.questc2corderProp=false;
              }
            }
      );
    },
    //跳转
    goTrade(api, index, row) {
      console.log(row);
      const maincoinid= row.autoid;
      const link ='/FabiNew/FBorder_info?autoinid='+maincoinid+''
      console.log(link);
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
    },
    // fiat_order查看正在进行中的法币订单
    fiat_order() {
      this.pageData.state='witrealy';
      this.request(this.api.fiat_order,this.pageData).then(res => {
        this.showLoading = true;
        if (res.code == "0" && res.data) {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
          // this.myOrderList = this.getMyOrderlist(
          //   list,
          //   this.coinInfo.coinid || list[0].coinid
          // );
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.container2 {
  min-height: calc(100% - 294px);
  padding: 0px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  border-bottom: 1px solid  #ffffff;
  border-top:1px solid  #ffffff;
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: #333;padding:15px 0;
  .pright{line-height: 24px;margin-left: 12px;}
}
.main-container{min-height: 80vh;}
// 内容部分
.main_cont{margin-top: 30px;}
.table-wrap {
  margin-right: 2px;
  border: none;
  border-bottom: none;
  border-right: none;
}
.title {
  margin-bottom: 25px;
}
span {
  &.status-0 {
    color: $color-success;
  }
  &.status-1 {
    color: #999;
  }
}
.info_box{
  .m15{margin: 12px 0;}
  .w120{width: 120px;}
  .w400{width: 400px;}
  a{color: red;}
}
.color-danger {
      color: $color-danger;
    }
.peo_info{border-top: 1px dashed #e5e5e5;}
.upload-file {
  margin-top: 10px;
  input {
    opacity: 0;
    position: absolute;
    z-index: 99;
    height: 100%;
  }
}
.vertical-line {
  height: 360px;
  width: 1px;
  background: $bd-color;
  transform: scaleX(0.5);
  bottom: 0;
}
.photo-preivew {
  margin-top: 20px;
  display: block;
  // width: 180px;
  max-width: 300px;
  margin-left: 12px;
  img {
    width: 100%;
    max-width: 300px;
  }
  &:first-child {
    margin-left: 0;
  }
}
.img_w300{
  max-width: 300px;
  img{max-width: 300px;}
  }
.deshd_bor{border-top: 1px dashed #eeeeee;padding-top: 10px;}  
</style>
